<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="handleBack">返回</el-button>
    </div>
    <el-row :gutter="16">
      <el-col :span="6">
        <template v-if="collapseArr.length > 0">
          <el-collapse v-model="activeName" @change="handleChange">
            <el-collapse-item
              v-for="(item,index) in collapseArr"
              :key="index"
              :title="item.typeName"
              :name="index"
            >
              <el-card shadow="never" class="mt20" v-for="(itm,ind) in item.list" :key="ind">
                <div slot="header">
                  <el-row>
                    <el-col :span="16">
                      <h3 style="cursor: pointer" @click="handleCardClick(itm)">{{ itm.ruleName }}</h3>
                    </el-col>
                    <el-col :span="8">
                      <span class="blue-number">{{ itm.warningTotal }}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <p class="mb0">
                        处置科室：
                        <span>{{ itm.deptName }}</span>
                      </p>
                    </el-col>
                    <el-col :span="8">
                      <span class="red">处置率：{{ itm.disposalRate }}%</span>
                    </el-col>
                  </el-row>
                </div>
                <el-row class="mb10">
                  <el-col :span="8" class="tl-center border-right">
                    正常
                    <br />
                    <span class="green">0</span>
                  </el-col>
                  <el-col @click="handleIllegal" :span="8" class="tl-center border-right">
                    违规
                    <br />
                    <span class="red">{{ itm.violationTotal }}</span>
                  </el-col>
                  <el-col @click="handleNot" :span="8" class="tl-center">
                    未处置
                    <br />
                    {{ itm.notDisposalTotal }}
                  </el-col>
                </el-row>
                <div class="f1-bg">
                  <h4 class="mb0">预警规则说明：</h4>
                  <p class="mb0">各科室药品费用在患者医疗费用所占比重超过规定标准</p>
                </div>
              </el-card>
            </el-collapse-item>
          </el-collapse>
        </template>
        <template v-else>
          <empty-comp />
        </template>
      </el-col>
      <el-col :span="18">
        <el-tabs v-model="tabName" @tab-click="handleTabClick">
          <el-tab-pane label="正常" name="5"></el-tab-pane>
          <el-tab-pane label="违规" name="4"></el-tab-pane>
          <el-tab-pane label="未处置" name="3"></el-tab-pane>
        </el-tabs>
        <e-table
          @getList="handleGetList"
          :tableData="tableData"
          :columns="columns"
          :loading="loading"
          :total="total"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getWarningData, getWarningDetailsList } from '@/api/monitor'
import { getMonitorTime } from '@/utils/util'

export default {
  data() {
    return {
      activeName: 0,
      tabName: '5',
      collapseArr: [{ name: 'xm' }],
      tableData: [],
      columns: [],
      loading: false,
      total: 1,
      ruleId: this.$route.query.ruleId,
      deptId: this.$route.query.deptId,
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      param: null
    }
  },
  methods: {
    handleBack() {
      this.$router.push({
        name: 'monitorIndex'
      })
    },
    handleCardClick(itm) {
      console.log('itm', itm)
      this.getWarningDetailsList({ deptId: this.deptId, ruleId: itm.ruleId })
    },
    handleIllegal() {
      this.tabName = '4'
    },
    handleNot() {
      this.tabName = '3'
    },
    handleChange(val) {
      console.log('val', val)
    },
    handleTabClick(val, event) {
      console.log('val', this.tabName, val, event)
      let param = getMonitorTime()
      // 不同tab传递不同参数请求表格
      this.handleGetList({ ruleId: this.ruleId, ...param, type: this.tabName })
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await getWarningData(this.queryParam)
      if (res.data && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        let tableArr = []
        this.columns = []
        records.map(v => {
          tableArr.push({ ...JSON.parse(v.content) })
        })
        let arr = JSON.parse(records[0].tableDefine)

        arr.map(v => {
          this.columns.push({
            label: v.showName,
            prop: v.field,
            width: v.width
          })
        })
        // console.log('arr', );

        // this.columns = [...arr]
        this.tableData = [...tableArr]
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    },
    getWarningDetailsList(param1) {
      this.param = Object.assign(this.param, param1)
      getWarningDetailsList({ ...this.param, type: 1 }).then(res => {
        console.log('getWarningDetailsList', res.data)
        let arr = new Map()
        if (res.data && res.data.length > 0) {
          res.data.map(v => {
            const value = arr.get(v.typeId)
            if (value) {
              value.list.push(v)
            } else {
              arr.set(v.typeId, { typeName: v.typeName, list: [v] })
            }
          })

          let arr1 = Array.from(arr).map(item => item[1])

          console.log('arr', arr1)

          this.collapseArr = [...arr1]
        } else {
          this.collapseArr = []
        }
      })
    }
  },
  created() {
    let param = getMonitorTime()
    this.param = Object.assign({}, param)

    console.log('ruleId', this.ruleId)
    if (this.ruleId) {
      this.handleGetList({ ruleId: this.ruleId, ...param, type: 5 })
      this.getWarningDetailsList()
    } else {
      this.handleGetList({ deptId: this.deptId, ...param, type: 5 })
      this.getWarningDetailsList({ deptId: this.deptId })
    }
  }
}
</script>

<style scoped>
.border-right {
  border-right: 1px dashed #cccccc;
}
.f1-bg {
  background-color: #f1f1f1;
  padding: 4px 8px;
}
.blue-number {
  font-weight: bold;
  color: #409eff;
}
.green,
.red {
  font-weight: bold;
}
</style>